{% extends "base/base.html" %}

{% block title %}杨学峰博客 | 友情链接 {% endblock %}

{% block content %}
<style>
  .link_rule {
    margin-bottom: 50px;
  }
  .yes {
    color: green;
    margin-right: 10px;
  }
  .no {
    color: red;
    margin-right: 10px;
  }
  .link {
    float: left;
    overflow: hidden;
    width: 33.33333333%;
  }
  .link a {
    display: block;
    padding: 5px 0px 15px 10px;
    border: 1px solid #f9f9f9;
    margin: 5px;
    transition: ease-in-out all .3s;
  }
  .link img {
    float: left;
    width: 40px;
    height: 40px;
    border-radius: 100%;
  }
  .link h3 {
    text-align: left;
    font-size: 16px;
    color: #000;
    height: 20px;
    display: -webkit-box;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    padding-left: 10px;
  }
  .link p {
    height: 50px;
    overflow: hidden;
    margin-top: 20px;
    font-size: 12px;
    line-height: 25px;
    color: #232328;
    display: -webkit-box;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .link:hover {
    transform: scale(1.05);
  }
  .link_link {
    display: block;
    height: 25px;
    background: #f9f9f9;
    color: darkgrey;
    bottom: 0;
    right: 0;
    left: 0;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
    margin-left: -10px;
    margin-bottom: -15px;
    word-break: break-word;
  }
  .link li {
    list-style: none;
  }
</style>
<div class="col-md-9">
  <div class="blog-post">
    <div class="blog-post-wrapper">
      <div class="blog-post__title">
        <h1 style="padding:30px 0;">Friend Links</h1>
      </div>

      <div class="link_rule">
        <p>
          <span class="yes"><i class="fa fa-check" aria-hidden="true"></i>原创优先</span>
          <span class="yes"><i class="fa fa-check" aria-hidden="true"></i>技术优先</span>
          <span class="no"><i class="fa fa-close" aria-hidden="true"></i>经常宕机</span>
          <span class="no"><i class="fa fa-close" aria-hidden="true"></i>不合法规</span>
          <span class="no"><i class="fa fa-close" aria-hidden="true"></i>擦边球站</span>
          <span class="no"><i class="fa fa-close" aria-hidden="true"></i>红标报毒</span>
        </p>
        <p>本站信息如下：</p>
        <p>名称：杨学峰博客</p>
        <p>网址：<a href="{% url 'home' %}">https://www.yangsihan.com</a></p>
        <p>图标：https://www.yangsihan.com/static/css/logo.png</p>
        <p>描述：一个Python程序员的博客。记录和分享学习的心得,感悟生活,留住感动,静静寻觅生活的美好。</p>
        <p style="color: red;">
          注意：如需交换链接请在下方留言，留言格式如本站信息，本站会不定时清理违规友链。
        </p>
        <p style="color: red;">
          PS：本站友情链接每次刷新页面都会随机排序。
        </p>
      </div>

      <div class="blog-post__nav">
        <ul style="padding-left:0;">
          {% for link in links %}
            <li class="link">
              <div>
                <a href="{{ link.link }}" target="_blank">
                  <img src="{{ link.avatar|default:'/static/img/default_icon.jpg' }}" />
                  <h3>{{ link.name }}</h3>
                  <p>{{ link.desc|default:'' }}</p>
                  <span class="link_link">{{ link.link|truncatewords_html:5 }}</span>
                </a>
              </div>
            </li>
          {% endfor %}
          <div class="clearfix"></div>
        </ul>
      </div>

      <div class="blog-post__comments"></div>
    </div>
  </div>
</div>
{% endblock %}

{% block js %}
  <script src="/static/plugins/valine/valine.js"></script>
{% endblock %}
